<template>
  <!-- 外层盒子 -->
  <div class="wrap w1">
    <div class="ultitle">
      <div
        v-for="item in getData"
        :key="item.name"
        :title="item.name"
        v-html="item.name"
      ></div>
    </div>
    <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->

    <div v-if="getList.length">
      <vue-seamless-scroll
        :data="getList"
        class="seamless-warp"
        :class-option="classOption"
      >
        <div class="con">
          <ul class="contentul contentul1">
            <li
              v-for="(item, inx) in getList"
              :key="item.id"
              :class="inx % 2 == 0 ? 'c0a396f' : 'c1b68ba'"
              v-if="getList.length"
              @click="changeItem(item)"
            >
              <p v-for="(it, i) in getData" :key="it.name">
                <span v-if="it.callBack" :title="it.callBack(item, inx)">
                  {{ it.callBack(item, inx) }}</span
                >
                <span v-else :title="item[it.deindex]">{{
                  item[it.deindex]
                }}</span>
              </p>
            </li>
          </ul>
        </div>
      </vue-seamless-scroll>
    </div>
    <!-- 内层盒子——内容区 -->
    <p
      v-if="!getList.length"
      style="
        text-align: center;
        font-size: 1vw;
        font-weight: bold;
        color: #fff;
        padding-top: 1vw;
      "
    >
      暂无数据
    </p>
  </div>
</template>
  
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    topData: {
      type: Array,
    },
    title: {
      type: String,
    },
    loadstatus: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
  },
  components: {
    //组件
    vueSeamlessScroll,
  },
  data() {
    return {
      CardPartsStatisticsList: [
        {
          itemname: 11222,
          number: 12,
        },
        {
          itemname: 14,
          number: 12,
        },
        {
          itemname: 15,
          number: 12,
        },
      ],
    };
  },

  mounted() {},
  methods: {
    // 加载更多
    loadingMore() {
      this.$emit("loadingMore");
    },
    changeItem(item) {
      this.$emit("choseItem", item);
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    getList() {
      // var list = [];
      // this.list.length &&
      //   this.topData.map((item) => {
      //     this.list.map((it) => {
      //       if (it[item.deindex] != undefined) {
      //         list.push({
      //           name: it[item.deindex],
      //           id: it.id,
      //         });
      //       }
      //     });
      //   });

      return this.list;
    },
    getData() {
      return this.topData;
    },
  },
};
</script>
  
  
 
<style lang="less" scoped>
.wrap {
  margin-top: 1vh;
  overflow: hidden;
  height: 100%;
}
.ultitle {
  position: relative;
  z-index: 99;
  background: #04bbdd;
  height: 0.755vw;
  line-height: 0.755vw;
  padding: 0.208vw 0.208vw;
  display: flex;
  width: 100%;
  color: #fff;
  align-items: center;
  justify-items: center;
}

.ultitle > div {
  width: 100%;
  font-size: 0.6vw;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.con {
  width: 100%;
  height: auto;
}
.contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  width: 100%;
  display: block;
}

.contentul > li > p {
  flex: 1;
  color: #fff;
  font-size: 0.45vw;
}

.text {
  color: #fff;
  padding: 0 0 0.417vw 0;
  font-size: 23px;
}

.con {
  width: 100%;
}
.contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  // padding-bottom: 32px;
}
.contentul > li {
  height: 0.755vw;
  line-height: 0.755vw;
  display: flex;

  padding: 0.26vw 0.26vw;
  margin-bottom: 0.026vw;
  cursor: pointer;
}
.c0a396f {
  background: #0a396f;
}
.c1b68ba {
  background: #227bd7;
}
.contentul > li > p {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.contentul > li:hover {
  background: rgb(44, 118, 217);
}
</style>

 